<template>
    <div class="footer_container">
        <div class="footer_list" v-if="isShowLink">
            <div class="title">友情链接</div>
            <div class="footer_list_group">
                <div class="footer_list_group_item" v-for="item in 8" :key="item">一个链接</div>
            </div>
        </div>
        <div class="footer_list" v-if="isShowScan">
            <div class="title">二维码扫一扫</div>
            <div class="footer_list_group">
                <div class="footer_list_group_item" v-for="item in 4" :key="item">
                    <img class="scan_item_image"
                        src="https://platformapi.leyi123.com/Upload/Personal/c1a7ddf02e6844a29ea9470f0cbcddfb.png"
                        alt="">
                    <div class="scan_item_text">二维码</div>
                </div>
            </div>
        </div>
    </div>
    <div class="keep_on_record">
        版权所有：----------有限公司
        |
        备案号：<a target="_blank" href="https://beian.miit.gov.cn">中ICP备000000001号-1</a>
    </div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
    textColor: {
        type: String,
        default: '#fff',
    },
    hoverColor: {
        type: String,
        default: '#ccc',
    },
    backgroundColor: {
        type: String,
        default: '#000',
    },
    isShowLink: {
        type: Boolean,
        default: true,
    },
    isShowScan: {
        type: Boolean,
        default: true,
    }
})
const text_color = computed(() => {
    return props.textColor;
})
const hover_color = computed(() => {
    return props.hoverColor;
})
const background_color = computed(() => {
    return props.backgroundColor;
})
</script>

<style lang="scss" scoped>
.footer_container,
.keep_on_record {
    background-color: v-bind(background_color);
    color: v-bind(text_color);
    padding: 20px 17.5%;
    width: 65%;

    .title {
        width: 150px;
        height: 30px;
        line-height: 30px;
        color: v-bind(text_color);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        border-right: 1px solid v-bind(text_color);
        padding-right: 20px;
        margin: 15px 0;
    }
}

.footer_list {
    display: flex;
    line-height: 30px;

    .footer_list_group {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .footer_list_group_item {
            margin: 15px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                color: v-bind(hover_color);
            }

            .scan_item_image {
                width: 46px;
                height: 46px;
            }

            .scan_item_text {
                font-size: 12px;
                text-align: center;
                line-height: 20px;
            }
        }
    }
}

.keep_on_record {
    text-align: center;
    font-size: 12px;
    border-top: 1px solid v-bind(text_color);

    a {
        color: v-bind(text_color);
        transition: all 0.3s;

        &:hover {
            color: v-bind(hover_color);
        }
    }
}

@media screen and (min-width: 513px) and (max-width: 1024px) {
    
}

@media screen and (max-width: 512px) {
    .footer_container,
    .keep_on_record{
        padding: 10px 30px;
        width: calc(100% - 60px);
        
        .title {
            width: 100px;
            height: 20px;
            line-height: 20px;
            font-size: 15px;
            border-right: none;
            padding: 0px;
            margin: 0;
        }
        
        .footer_list{
            flex-direction: column;
            .footer_list_group{
                .footer_list_group_item{
                    margin: 5px;
                }
            }
        }
    }
}
</style>